<script setup lang="ts">
import { ref, defineEmits } from "vue"
import { $t } from '@vben/locales';
import onlineExamImage from '#/assets/images/exam/online-exam.png';
import offlineExamImage from '#/assets/images/exam/offline-exam.png';

defineOptions({ name: 'Dialog' })

const dialogVisible = ref(false)

const inint = () => {
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
}

const choseExamType = (type:string) => {
  dialogVisible.value = false
  emit('choseExamType', type)
}
defineExpose({ inint })

const emit = defineEmits(['choseExamType']);

</script>
<template>
  <el-dialog v-model="dialogVisible" align-center :title="$t('exam.choseExamType')" width="500" :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="flex justify-center p-[20px] border-box">
      <div class="exam-type cursor-pointer hover:text-[#0067D1] flex-none w-[60px] mr-[80px]" @click="choseExamType('OFFLINE')">
        <div class="img-war w-[60px] h-[60px] mb-[10px]">
          <img :src="offlineExamImage" alt="">
        </div>
        <div>{{$t('exam.offline')}}</div>
      </div>
      <div class="exam-type cursor-pointer hover:text-[#0067D1] flex-none w-[60px]" @click="choseExamType('ONLINE')">
        <div class="img-war w-[60px] h-[60px] mb-[10px]">
          <img :src="onlineExamImage" alt="">
        </div>
        <div>{{$t('exam.online')}}</div>
      </div>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
.exam-type {
  .img-war {
    border-radius: 50%;
    position: relative;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    &:hover {
      color: #0067D1;
      &::after {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.24);
        z-index: 1;
      }
    }
  }
}
</style>
